<template>
  <view class="merchantRecommendation">
    <text class="title">商户推荐</text>
    <view class="content">
      <view class="around-tab">
        <view
          v-for="item in menulist"
          :key="item._id"
          :class="`around-tab__item ${current == item._id ? 'active' : ''}`"
          @tap="current = item._id"
          ><text>{{ item.name }}</text
          ><view v-show="current == item._id" class="line" />
        </view>
      </view>
      <!-- <view class="card-list">
        <merchants_card v-for="(item,index) in datalist" :key="index" :data="item" />
      </view> -->
    </view>
    <view class="card-list">
      <merchants_card
        v-for="(item, index) in datalist"
        :key="index"
        class="card"
        :data="item"
      />
    </view>
    <view class="bottom" @tap="toMerchantList">查看更多门店>></view>
  </view>
</template>

<script>
import "./index.scss";
import Taro from "@tarojs/taro";
import icon1 from "../../../../assets/icon/icon1.png";
import img1 from "../../../../assets/image/merchat.png";
import merchantsCard from "../../../../components/merchantsCard/index";
import request from "../../../../utils/request";

export default {
  components: {
    merchants_card: merchantsCard,
  },

  data() {
    return {
      msg: "Hello33333 world!",
      img1: img1,
      current: "",
      datalist: [],
      menulist: [{_id:''}],
    };
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    current: function (newCurrent, oleCurrent) {
      this.getShoppingList(newCurrent )
    }
  },
  created() {
    console.log("222");
    this.getDistrict();

    
  },

  methods: {
    show: function () {
      console.log("222");
    },
    getDistrict() {
      request("get", "/api/rest/shopping_districts.htm").then((res) => {
        console.log(res, "getDistrict");
        this.menulist = res._list;
        this.current = res._list[0]._id;
        this.getShoppingList( res._list[0]._id);
      });
    },
    getShoppingList(id) {
      request("get", "/api/rest/businesses.htm", {
        q_shopping_district_id:id,
        row_limit: 6,
        p: 1,
      }).then((res) => {
        console.log(res._list, "ShoppingList");
        // this.menulist = res._list
        this.datalist = res._list;

        // _id title face_image_id
      });
    },
    toMerchantList() {
      Taro.navigateTo({
        url: `/pages/merchantlist/index`,
      });
    },
  },

  // setCurrent(x) {
  //   console.log('x')
  //   this.current=x
  // },
};
</script>
